<template>

  <br></br>

  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="活动标题">
      <el-input v-model="formInline.activityTitle" placeholder="严选"></el-input>
    </el-form-item>
    <el-form-item label="活动ID">
      <el-input v-model="formInline.activityId" ></el-input>
    </el-form-item>
    <el-form-item label="活动类型">
      <el-select v-model="formInline.activityType" placeholder="活动类型">
        <el-option label="全部类型" value=""></el-option>
        <el-option label="普通活动" value="1"></el-option>
        <el-option label="专属活动" value="2"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="fetchActivityInfoData('')">搜索</el-button>
    </el-form-item>
  </el-form>
  <br></br>

  <el-table
    :data="tableData"
    style="width: 100%"
    :row-class-name="tableRowClassName">
    <el-table-column
      prop="activityTitle"
      label="标题"
      width="180">
    </el-table-column>
    <el-table-column
      prop="activityId"
      label="ID"
      width="180">
    </el-table-column>
    <el-table-column
      prop="activityType"
      label="类型">
    </el-table-column>
  </el-table>

  <div class="block">
    <br></br>
    <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-sizes="[10, 20, 30, 40]"
    :page-size="pageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total">
    </el-pagination>
  </div>

</template>
  
  <style>
    .el-table .warning-row {
      background: oldlace;
    }
  
    .el-table .success-row {
      background: #f0f9eb;
    }
  </style>
  
  <script>
    import axios from 'axios';

    export default {
      methods: {
        tableRowClassName({row, rowIndex}) {
          if ((rowIndex+1) % 4 === 1) {
            return 'success-row';
          } else if ((rowIndex+1) % 2 === 1) {
            return 'warning-row';
          }
          return '';
        },
        fetchActivityInfoData() {
          
          console.log('类型:'+ this.formInline.activityType);

          var baseUri=this.baseUrl+'/ksActivityInfo/pageReq';
          // 创建请求的数据对象
          const data = {
            pageNumber: this.currentPage,
            pageSize: this.pageSize,
            activityTitle: this.formInline.activityTitle,
            activityId: this.formInline.activityId,
            activityType: this.formInline.activityType 
          };
            
          axios.post(baseUri,data)
          .then(response => {
            // this.tableData = response.data.data;
            var htpData = response.data.data;

            this.tableData = htpData.list.map(item => {
              return {
                activityTitle: item.activityTitle,
                activityId: item.activityId,
                activityType: item.activityType === 1?"普通活动":"专属活动",
              }
            });
            this.total = htpData.total;
          })
          .catch(error => {
            console.error('请求用户数据出错:', error);
          });

        },
        activityTypeSelect(val) {
          console.error('选择器:', val);
        },
        handleSizeChange(val) {
          this.pageSize = val;
          this.fetchActivityInfoData()
        },
        handleCurrentChange(val) {
          this.currentPage = val;
          this.fetchActivityInfoData()
        }
      },
      data() {
        return {
          tableData: [{
            activityTitle: '2016-05-03',
            activityId: '王小虎',
            activityType: '上海市普陀区金沙江路 1518 弄'
          }],
          baseUrl: 'http://127.0.0.1:8414/vv',
          currentPage: 1,
          pageSize: 10,
          total: 400,
          value: '',
          formInline: {
            activityTitle: '',
            activityId: '',
            activityType: ''
          }
        }
      }
    }

  </script>

